<template>
  <a-modal  ok-text="确认"
      cancel-text="取消"
    :maskClosable="false"
    title="表单预览"
    :visible="openDialog"
    :destroyOnClose="true"
    :footer="null"
    @cancel="mainDialogClose('commonForm')"
  >
    <div>
      <!-- <form-create v-model.trim="fApi" :rule="rule" :option="option" :value.sync="fApiValue"></form-create> -->
      <form-create :rule="rule" :option="option"></form-create>
    </div>
  </a-modal>
</template>

<script>
function createForm(lists) {
  let _lists = [];
  _lists = lists.map((item) => {
    let { formItemLabel, ...rest } = item;
    return {
      title: formItemLabel,
      ...rest,
    };
  });
  return _lists;
}

export default {
  name: "previewFormDialog",
  props: {
    openDialog: Boolean,
    config: Object,
  },
  components: {},
  data() {
    return {
      // username: '',
      // role: '',
      // compId: '',
      // compType: '',

      //实例对象
      fApi: {},
      //表单数据
      fApiValue: {},
      //表单生成规则
      rule: [],
      //组件参数配置
      option: {
        form: {
          hideRequiredMark: false,
          layout: "inline",
          labelAlign: "right",
          labelCol: {
            span: 12,
          },
          wrapperCol: {
            span: 12,
          },
        },
        submitBtn: {
          show: false,
        },
        resetBtn: {
          show: false,
        },

        //表单提交事件
        // onSubmit: function(formData) {
        //   alert(JSON.stringify(formData));
        // },
      },
    };
  },
  watch: {
    openDialog: {
      immediate: false,
      handler: async function(newVal, oldVal) {
        let _this = this;
        let lists = createForm(_this.config.rule);
        _this.rule = [...lists];
      },
    },
  },
  methods: {
    mainDialogClose(formName) {
      this.$emit("update:openDialog", false);
    },
    createFormHandle() {
      this.rule = this.formItemLists.map((item) => {
        let { formItemLabel, ...rest } = item;
        return {
          title: formItemLabel,
          ...rest,
        };
      });
    },
  },
  mounted() {},
 mounted() {},
};
</script>

<style scoped></style>
